<template>
  <lay-container fluid="true" style="padding: 10px;height: 100%;overflow-y: hidden">

    <lay-tab type="brief" v-model="seltab" class="emptytab"
             @change="showInfo"
    >
      <lay-tab-item title="设备属性" id="sbsx"></lay-tab-item>
      <lay-tab-item title="其他信息" id="qtxx"></lay-tab-item>
    </lay-tab>
    <div  style=" height:calc(100% - 100px);  overflow-x: hidden;overflow-y: hidden;">
      <component :is="componentType" :id="id"   ></component>
    </div>


  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";
import MyWin from "../../library/MyWin";
import MyPage from "../../library/MyPage";
import {DateUtil} from "../../library/DateUtil";
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport";

import blank from "../htty/blank.vue"
import propvalue from "./propvalue.vue";
export default {

  components: {   blank,propvalue },
  props:{
    id:String
  },

  setup(prop:any, context:any) {

    const baseUrl="/commconnectinfo";
    const baseQUrl=baseUrl+"/page";
    const pageName="上下线数据";

    const id=ref(prop.id)
    const myWin=ref<any>(null);
    const seltab=ref("qtxx")
    const componentType=ref("sbsx")
    onMounted(() =>{
      myWin.value=new MyWin();
      
      setTimeout(function (){
        seltab.value="sbsx"
        showInfo()
      },200)
    });
    const showInfo=async ()=>{
      componentType.value="blank";
      let componentType2=""
      switch (seltab.value){
        case "sbsx":
          componentType2="propvalue"
          break;
        case "qtxx":
          componentType2="blank"
          break;
      }
      setTimeout(function (){

        componentType.value=componentType2
      },50)

    }

    return {

      myWin,
      seltab,
      componentType,
      showInfo,
      id,

    }
  }
}
</script>
<style  scoped >

.maintable-box{
  height: calc(100% - 140px);
}

</style>